<template>
  <div class="BusNeighborsList wd1200">
    <v-bread />
    <div class="select-box">
      <div class="box">
        <el-select v-model="street" placeholder="注册资本" clearable class="el-select" @clear="registerClear" @change="registerChange">
          <el-option v-for="(item, index) in registerSelect" :key="item.label" :label="`${item.label} (${item.number})`" :value="index" />
          <!-- <el-option label="500-1000万" value="1" />
          <el-option label="1001万-2000万" value="2" />
          <el-option label="2000万以上" value="3" /> -->
        </el-select>
      </div>
      <div class="box">
        <el-select
          v-model="industry"
          placeholder="注册年限"
          clearable
          class="el-select"
          @clear="yearClear"
          @change="yearChange"
        >
          <el-option v-for="(item, index) in yearSelect" :key="index" :label="`${item.capitalRange} (${item.companyCount || item.total || 0})`" :value="index" />
        </el-select>
      </div>
      <div class="box">
        <el-input v-model="companyName" placeholder="请输入企业名称" class="el-select" />
      </div>
      <el-button type="primary" class="search-btn" @click="toDetails">查询</el-button>
    </div>
    <div class="wd1200">
      <div v-show="!total" class="noData">暂无数据</div>
      <div v-for="item in listData" v-show="total" :key="item.companyId" class="item-list overflow">
        <div class="tag fl">{{ item.companyName&&item.companyName.slice(0, 2) }}</div>
        <div class="text overflow">
          <div class="title"><span>{{ item.companyName }}<el-tag size="mini" type="success" color="#E3FCE9" class="tags">{{ item.companyStatus }}</el-tag></span></div>
          <div class="info">
            <div class="box">法定代表人：{{ item.legalPerson }}</div>
            <div class="box">注册日期：{{ item.establishDate }}</div>
            <div class="box">注册资本：{{ Number(item.capitalNum).toFixed(0) }}万</div>
          </div>
          <div class="address">
            <span>企业地址：</span>{{ item.companyAddress }}
          </div>
        </div>
        <div>
          <el-button v-if="!item.isCollect" size="medium" @click="selfChoose(item)">自选</el-button>
          <el-button v-if="item.isCollect" size="medium" style="background-color: #e2e1e1" @click="removeChoose(item)">取消自选</el-button>
          <el-button type="primary" class="btn" @click="look(item)">查看详情</el-button>
        </div>
      </div>
    </div>
    <v-pagination v-if="total" :total="total" :page-size="pageSize" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" />
  </div>
</template>
<script>
import vBread from '../../../components/busNeighbors/bread'
import vPagination from '../../../components/busNeighbors/pagination'
// import apiCollection from '@/api/busNeighbors'
import { user_collect_add, check_add_in_user_collect, remove } from '@/api/busNeighbors'
import { trim } from 'lodash'
export default {
  name: 'BusNeighborsList',
  components: { vBread, vPagination },
  data() {
    return {
      street: '',
      industry: '',
      sort: '',
      listData: [],
      registerSelect: [],
      yearSelect: [],
      params: {},
      apiCollection: {},
      api: '',
      total: 0,
      pageSize: 0,
      companyName: '',
      searchApi: [],
      exp: '',
      phonenumber: '',
      userId: '',
      userdata: {},
      title: ''
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  async mounted() {
    if (JSON.parse(sessionStorage.getItem('user') != null)) {
      this.userdata = JSON.parse(sessionStorage.getItem('user'))
      this.userId = JSON.parse(sessionStorage.getItem('userId'))
      this.phonenumber = this.userdata.phonenumber
    }
    this.searchApi = JSON.parse(this.$route.query.data).searchApi
    this.api = JSON.parse(this.$route.query.data).api
    this.params = JSON.parse(this.$route.query.data).params
    this.pageSize = JSON.parse(this.$route.query.data).params.pageSize
    this.apiCollection = require('@/api/busNeighbors')
    this.title = JSON.parse(this.$route.query.data).title
    await this.toDetails()
    await this.init(this.apiCollection)
  },
  methods: {
    async selfChoose(item) {
      const res = await user_collect_add({
        capitalNum: item.capitalNum,
        companyAddress: item.companyAddress,
        companyId: item.companyId,
        companyName: item.companyName,
        companyStatus: item.companyStatus,
        establishDate: item.establishDate,
        legalPerson: item.legalPerson,
        phonenumber: this.phonenumber,
        userId: this.userId
        // userId: 11
      })
      if (res.errcode === 0) {
        this.$message({
          showClose: true,
          message: '自选成功',
          type: 'success'
        })
        this.toDetails()
      } else {
        // this.$message({
        //   type: 'error',
        //   message: res.errmsg
        // })
      }
    },
    async removeChoose(item) {
      const res = await remove(item.collectId)
      if (res.errcode === 0) {
        this.$message({
          showClose: true,
          message: '取消成功',
          type: 'success'
        })
        this.toDetails()
      } else {
        this.$message({
          type: 'error',
          message: res.errmsg
        })
      }
    },
    async toDetails(pageNumber = 1) {
      this.params.pageNumber = pageNumber
      if (this.companyName) this.params.companyName = this.companyName
      this.params.companyName = trim(this.params.companyName, '%')
      if (this.companyName) {
        this.params.companyName = `%${this.params.companyName || ''}%`
      } else {
        this.params.companyName = ''
      }
      if (this.title === '注册资本2000万以上企业数') this.params.minCapitalNum = 2000
      this.params = this.removeProperty(this.params)
      const res = await this.apiCollection[this.api](this.params)
      this.listData = res.data && res.data.content
      this.total = res.data && res.data.total || 0
      if (!this.listData) return
      const res1 = await check_add_in_user_collect({
        companyIds: this.listData.map(item => item.companyId),
        userId: this.userId
        // urserId: 11
      })
      this.listData.forEach(item => {
        res1.data.content.forEach(val => {
          // this.$set(item, 'isCollect', false)
          if (item.companyId === val.companyId) {
            this.$set(item, 'collectId', val.collectId)
            this.$set(item, 'isCollect', true)
          }
        })
      })
    },
    async init(apiCollection) {
      console.log(apiCollection, this.searchApi && this.searchApi[0].api)
      let res1 = null
      if (this.searchApi && this.searchApi[0].api) {
        res1 = await apiCollection[(this.searchApi && this.searchApi[0].api)](this.searchApi && this.searchApi[0].params)
      } else {
        res1 = await apiCollection['company_base_list_by_capital_count']({
          companyMajorType: this.params.companyMajorType,
          establishDate: this.params.endDate,
          lyComType: this.params.lyComType,
          lyId: this.params.lyId
        })
      }
      this.registerSelect = [{
        label: '500万以下',
        number: res1.data.content.filter(item => item.capitalRange === '500万以下').reduce((total, num) => total + (num.companyCount || num.total), 0),
        minCapitalNum: null,
        maxCapitalNum: 500
      }, {
        label: '500-1000万',
        number: res1.data.content.filter(item => item.capitalRange1 === '500-1000万').reduce((total, num) => total + (num.companyCount || num.total), 0),
        minCapitalNum: 500,
        maxCapitalNum: 1000
      }, {
        label: '1000万-2000万',
        number: res1.data.content.filter(item => item.capitalRange2 === '1000万-2000万').reduce((total, num) => total + (num.companyCount || num.total), 0),
        minCapitalNum: 1000,
        maxCapitalNum: 2000
      }, {
        label: '2000万以上',
        number: res1.data.content.filter(item => item.capitalRange3 === '2000万以上').reduce((total, num) => total + (num.companyCount || num.total), 0),
        minCapitalNum: 2000,
        maxCapitalNum: null
      }]

      if (res1.data && res1.data.content.length > 0 && res1.data.content[0] && Object.keys(res1.data.content[0]).length <= 2) {
        this.registerSelect.forEach(item => {
          if (item.label === res1.data.content[0]['capitalRange']) {
            this.$set(item, 'number', res1.data.content[0].companyCount || res1.data.content[0].total)
          }
        })
      }
      console.log(this.registerSelect)
      const yearAll = {
        capitalRange: '全部',
        companyCount: this.total || 0
      }
      this.registerSelect.unshift({
        label: '全部',
        number: this.total || 0,
        // number: this.registerSelect.reduce((total, num) => total + num.number, 0),
        minCapitalNum: null,
        maxCapitalNum: null
      })
      // const res1 = await apiCollection[(this.searchApi && this.searchApi[0].api) || 'company_base_list_by_capital_count'](this.searchApi && this.searchApi[0].params || {
      //   companyMajorType: this.params.companyMajorType,
      //   establishDate: this.params.endDate,
      //   lyComType: this.params.lyComType,
      //   lyId: this.params.lyId
      // })
      let res2 = null
      if (this.searchApi && this.searchApi[1].api) {
        this.exp = this.searchApi[1].exProperty
        res2 = await apiCollection[(this.searchApi && this.searchApi[1].api)](this.searchApi && this.searchApi[1].params)
      } else {
        res2 = await apiCollection['company_base_list_by_year_count']({
          companyMajorType: this.params.companyMajorType,
          establishDate: this.params.endDate,
          lyComType: this.params.lyComType,
          lyId: this.params.lyId
        })
      }
      // const res2 = await apiCollection[(this.searchApi && this.searchApi[1].api) || 'company_base_list_by_year_count'](this.searchApi && this.searchApi[1].params || {
      //   companyMajorType: this.params.companyMajorType,
      //   establishDate: this.params.endDate,
      //   lyComType: this.params.lyComType,
      //   lyId: this.params.lyId
      // })
      console.log(this.companyNames)
      if (this.title === '招聘企业数') {
        this.yearSelect = res2.data.content.map(item => {
          if (this.exp) {
            item.capitalRange = item[this.exp]
          }
          if (item.capitalRange === '3个以下') {
            // if (item.capitalRange === '3个月内') yearAll.companyCount += item.companyCount
            return {
              ...item,
              minYear: null,
              maxYear: 3
            }
          } else if (item.capitalRange === '4-5个') {
            return {
              ...item,
              minYear: 4,
              maxYear: 5
            }
          } else if (item.capitalRange === '6-10个') {
            return {
              ...item,
              minYear: 6,
              maxYear: 10
            }
          } else if (item.capitalRange === '10个以上') {
            return {
              ...item,
              minYear: 10,
              maxYear: null
            }
          } else {
            return null
          }
        }).filter(a => a)
        const d = ['3个以下', '4-5个', '6-10个', '10个以上']
        const yearSelects = d.map(item => {
          console.log(this.yearSelect.filter(a => a.capitalRange === item))
          if (this.yearSelect.filter(a => a.capitalRange === item).length === 0) {
            if (item === '3个以下') {
              return {
                capitalRange: '3个以下',
                companyCount: 0,
                total: 0,
                minYear: 0,
                maxYear: 0.25
              }
            } else if (item === '4-5个') {
              return {
                capitalRange: '4-5个',
                companyCount: 0,
                total: 0,
                minYear: 0,
                maxYear: 0.5
              }
            } else if (item === '6-10个') {
              return {
                capitalRange: '6-10个',
                companyCount: 0,
                total: 0,
                minYear: 0,
                maxYear: 1
              }
            } else if (item === '10个以上') {
              return {
                capitalRange: '10个以上',
                companyCount: 0,
                total: 0,
                minYear: 1,
                maxYear: 3
              }
            }
          } else {
            return this.yearSelect.filter(a => a.capitalRange === item)[0]
          }
        })
        this.yearSelect = yearSelects
        this.yearSelect.unshift(yearAll)
      } else {
        let y = 0
        let z = 0
        this.yearSelect = res2.data.content.map(item => {
          if (this.exp) {
            item.capitalRange = item[this.exp]
          }
          if (item.capitalRange === '3个月内') {
            // if (item.capitalRange === '3个月内') yearAll.companyCount += item.companyCount
            return {
              ...item,
              minYear: 0,
              maxYear: 0.25
            }
          } else if (item.capitalRange === '半年内' || item.capitalRange === '3个月内') {
            // if (item.capitalRange === '半年内') yearAll.companyCount += item.companyCount
            y += item.companyCount || item.total
            return {
              ...item,
              companyCount: y,
              total: y,
              minYear: 0,
              maxYear: 0.5
            }
          } else if (item.capitalRange === '1年内' || item.capitalRange === '半年内' || item.capitalRange === '3个月内') {
            // if (item.capitalRange === '1年内') yearAll.companyCount += item.companyCount
            z += item.companyCount || item.total
            return {
              ...item,
              companyCount: z,
              total: z,
              minYear: 0,
              maxYear: 1
            }
          } else if (item.capitalRange === '1-3年') {
            // yearAll.companyCount += item.companyCount
            return {
              ...item,
              minYear: 1,
              maxYear: 3
            }
          } else if (item.capitalRange === '3-5年') {
            // yearAll.companyCount += item.companyCount
            return {
              ...item,
              minYear: 3,
              maxYear: 5
            }
          } else if (item.capitalRange === '5-10年') {
            // yearAll.companyCount += item.companyCount
            return {
              ...item,
              minYear: 5,
              maxYear: 10
            }
          } else if (item.capitalRange === '11年以上') {
            // yearAll.companyCount += item.companyCount
            return {
              ...item,
              minYear: 10,
              maxYear: null
            }
          } else {
            return null
          }
        }).filter(a => a)
        console.log(this.yearSelect)
        const d = ['3个月内', '半年内', '1年内', '1-3年', '3-5年', '5-10年', '11年以上']
        const yearSelects = d.map(item => {
          console.log(this.yearSelect.filter(a => a.capitalRange === item))
          if (this.yearSelect.filter(a => a.capitalRange === item).length === 0) {
            if (item === '3个月内') {
              return {
                capitalRange: '3个月内',
                companyCount: 0,
                total: 0,
                minYear: 0,
                maxYear: 0.25
              }
            } else if (item === '半年内') {
              y += item.companyCount
              return {
                capitalRange: '半年内',
                companyCount: 0,
                total: 0,
                minYear: 0,
                maxYear: 0.5
              }
            } else if (item === '1年内') {
              z += item.companyCount
              return {
                capitalRange: '1年内',
                companyCount: 0,
                total: 0,
                minYear: 0,
                maxYear: 1
              }
            } else if (item === '1-3年') {
              return {
                capitalRange: '1-3年',
                companyCount: 0,
                total: 0,
                minYear: 1,
                maxYear: 3
              }
            } else if (item === '3-5年') {
              return {
                capitalRange: '3-5年',
                companyCount: 0,
                total: 0,
                minYear: 3,
                maxYear: 5
              }
            } else if (item === '5-10年') {
              return {
                capitalRange: '5-10年',
                companyCount: 0,
                total: 0,
                minYear: 5,
                maxYear: 10
              }
            } else if (item === '11年以上') {
              return {
                capitalRange: '11年以上',
                companyCount: 0,
                total: 0,
                minYear: 10,
                maxYear: null
              }
            }
          } else {
            return this.yearSelect.filter(a => a.capitalRange === item)[0]
          }
        })
        console.log(yearSelects)
        this.yearSelect = yearSelects
        this.yearSelect[1].companyCount += this.yearSelect[0].companyCount
        this.yearSelect[2].companyCount += this.yearSelect[1].companyCount
        console.log(yearAll)
        this.yearSelect.unshift(yearAll)
      }

      console.log(this.yearSelect)
    },
    registerChange(index) {
      this.params.pageNumber = 1
      const item = this.registerSelect[index]
      this.$set(this.params, 'minCapitalNum', item.minCapitalNum)
      this.$set(this.params, 'maxCapitalNum', item.maxCapitalNum)
      this.toDetails()
    },
    registerClear() {
      delete this.params.minCapitalNum
      delete this.params.maxCapitalNum
    },
    yearChange(index) {
      this.params.pageNumber = 1
      const item = this.yearSelect[index]
      if (this.title === '招聘企业数') {
        this.$set(this.params, 'minCeTotal', item.minYear)
        this.$set(this.params, 'maxCeTotal', item.maxYear)
      } else {
        this.$set(this.params, 'minYear', item.minYear)
        this.$set(this.params, 'maxYear', item.maxYear)
      }
      this.params = this.removeProperty(this.params)

      this.toDetails()
    },
    removeProperty(obj) {
      Object.keys(obj).forEach(item => {
        if (obj[item] === '' || obj[item] === undefined || obj[item] === null || obj[item] === 'null') delete obj[item]
      })
      return obj
    },
    yearClear() {
      delete this.params.minYear
      delete this.params.maxYear
      delete this.params.minCeTotal
      delete this.params.maxCeTotal
    },
    handleSizeChange(val) {
      this.$set(this.params, 'pageSize', val)
      this.toDetails()
    },
    handleCurrentChange(val) {
      this.$set(this.params, 'pageNumber', val)
      this.toDetails(val)
    },
    look(data) {
      this.$router.push({ path: '/details', query: { id: data.companyId, uniscid: data.uniscid }})
    }
  }
}
</script>
<style lang="scss" scoped>
.BusNeighborsList{
  .noData{
    text-align: center;
    height: 80px;
    line-height: 80px;
    color: #bcbcbc;
    font-weight: 700;
    font-size: 18px;
  }

  .select-box {
    display: flex;
    padding: 30px 0 0;

    .box {
      margin-right: 20px;
      width: 386px;

      .el-select {
        width: 100%;
      }
    }

    .box:last-child {
      margin-right: 0;
    }
    .search-btn {
      width: 104px;
      background: linear-gradient( 270deg, #649CED 0%, #0071DF 100%);
      border-radius: 6px 6px 6px 6px;
      line-height: 36px;
      height: 36px;
      padding: 0;
    }
  }
  .item-list {
    padding: 36px 0;
    border-bottom: 1px solid #e8eaec;
    color: #000000;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .tag {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 72px;
      height: 72px;
      border-radius: 4px 4px 4px 4px;
      background: #7db3da;
      font-size: 22px;
      color: #fff;
      margin-right: 24px;
    }

    .text {
      position: relative;
      flex: 1;
    }
    .btn{
      background: #217FE4;
    }

    .title {
      font-size: 18px;
      font-weight: bold;
      line-height: 24px;
      margin-bottom: 14px;
      span{
        position: relative;

        .tags{
          position: absolute;
          right: 0;
          transform: translateX(130%);
          top: 0%;
        }
      }
    }

    .info {
      display: flex;
      margin-bottom: 14px;

      .box {
        font-weight: 400;
        line-height: 21px;
        margin-right: 60px;
        background: url(../../../assets/images/icon01.png) no-repeat left center;
        padding-left: 20px;
      }

      .box:nth-child(2) {
        background: url(../../../assets/images/icon02.png) no-repeat left center;
      }

      .box:nth-child(3) {
        background: url(../../../assets/images/icon03.png) no-repeat left center;
      }

      .box:nth-child(4) {
        background: url(../../../assets/images/icon04.png) no-repeat left center;
      }

      .box:last-child {
        margin-right: 0;
      }
    }

    .address {
      font-weight: 400;
      line-height: 21px;

      span {
        color: #999999;
      }
    }

    .details {
      position: absolute;
      right: 0;
      top: 50%;
      width: 112px;
      height: 40px;
      background: #217fe4;
      border-radius: 2px;
      text-align: center;
      line-height: 40px;
      color: #fff;
      font-size: 16px;
      font-weight: 400;
      transform: translateY(-50%);
      cursor: pointer;
    }
  }

}
</style>
